import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';

/*
1、圆和圆之间间距46
2、圆点大小：7、10、13、16
3、圆环大小：20（填充色#ffffff、内描边4#FF8CC1）
4、灰色圆和粉色圆一样大小（补充了未选中状态到蓝湖）
*/
class ScrawlSizeSliderStyle {
  static final double pointSpacing = 46;
  static final List<double> pointWidths = [7, 10, 13, 16];
  static final double thumbWidth = 20;
  static final double thumbBorderWidth = 4;
  static final Color thumbBorderColor = Color(0xFFFF8CC1);
  static final Color thumbColor = Color(0xFFFFFFFF);
  static final Color trackColor = Color(0xFFF0F1F5);
  static final Color trackActiveColor = Color(0xFFFF8CC1);
  static final double trackHeight = 5;

  static Rect trackRect({
    @required RenderBox parentBox,
    Offset offset = Offset.zero,
  }) {
    final double left = (thumbWidth - pointWidths.first).abs() / 2;
    final double right = (thumbWidth - pointWidths.last).abs() / 2;
    final double width = parentBox.size.width - left - right;
    final double height = pointWidths.last;
    final double top = (parentBox.size.height -
            height +
            (thumbWidth - pointWidths.last).abs()) /
        2;

    return Rect.fromLTWH(left, top, width, height);
  }

  static Rect valueRect({
    @required RenderBox parentBox,
    Offset offset = Offset.zero,
  }) {
    final double left = max(thumbWidth, pointWidths.first) / 2;
    final double right = max(thumbWidth, pointWidths.last) / 2;
    final double width = parentBox.size.width - left - right;
    final double height = parentBox.size.height;
    final double top = offset.dy;

    return Rect.fromLTWH(left + offset.dx, top, width, height);
  }
}

class ScrawlSizeSliderComponents {
  static void drawTrack(
    PaintingContext context,
    Offset offset, {
    @required RenderBox parentBox,
    @required Offset thumbCenter,
    @required int sections,
    @required int value,
  }) {
    assert(context != null);
    assert(offset != null);
    assert(parentBox != null);
    assert(thumbCenter != null);
    assert(sections != null);

    final Rect valueRect = ScrawlSizeSliderStyle.valueRect(
      parentBox: parentBox,
      offset: offset,
    );

    // context.canvas.drawRect(valueRect, Paint()..color = Colors.red);

    final Paint activePaint = Paint()
      ..color = ScrawlSizeSliderStyle.trackActiveColor;
    final Paint paint = Paint()..color = ScrawlSizeSliderStyle.trackColor;

    Paint _strokePaint(Paint paint, double strokeWidth) {
      return paint
        ..strokeWidth = strokeWidth
        ..strokeJoin = StrokeJoin.round
        ..strokeCap = StrokeCap.round
        ..style = PaintingStyle.stroke;
    }

    // 背景
    context.canvas.drawLine(
      valueRect.centerLeft,
      valueRect.centerRight,
      _strokePaint(paint, ScrawlSizeSliderStyle.trackHeight),
    );
    for (int i = 0;
        i <
            min(
              sections + 1,
              ScrawlSizeSliderStyle.pointWidths.length,
            );
        i++) {
      final double pointWidth = ScrawlSizeSliderStyle.pointWidths[i];
      context.canvas.drawPoints(
        PointMode.points,
        [
          Offset(
            valueRect.left + valueRect.width * i / sections,
            valueRect.center.dy,
          )
        ],
        _strokePaint(paint, pointWidth),
      );
    }

    // 前景
    context.canvas.drawLine(
      valueRect.centerLeft,
      thumbCenter,
      _strokePaint(activePaint, ScrawlSizeSliderStyle.trackHeight),
    );
    for (int i = 0;
        i <
            min(
              value + 1,
              ScrawlSizeSliderStyle.pointWidths.length,
            );
        i++) {
      final double pointWidth = ScrawlSizeSliderStyle.pointWidths[i];
      context.canvas.drawPoints(
        PointMode.points,
        [
          Offset(
            valueRect.left + valueRect.width * i / sections,
            valueRect.center.dy,
          )
        ],
        _strokePaint(activePaint, pointWidth),
      );
    }
  }

  static void drawThumb(
    PaintingContext context,
    Offset center, {
    @required RenderBox parentBox,
  }) {
    assert(context != null);
    assert(center != null);

    final radius = ScrawlSizeSliderStyle.thumbWidth / 2;
    final double borderWidth = ScrawlSizeSliderStyle.thumbBorderWidth;

    context.canvas.drawCircle(
      center,
      radius,
      Paint()..color = ScrawlSizeSliderStyle.thumbColor,
    );
    context.canvas.drawCircle(
      center,
      radius - borderWidth / 2,
      Paint()
        ..style = PaintingStyle.stroke
        ..color = ScrawlSizeSliderStyle.thumbBorderColor
        ..strokeWidth = borderWidth,
    );
  }
}
